<template>
  <div>
    <div class="header block">
      <div class="row">
        <div class="search">
          <text>保单状态</text>
          <el-select v-model="searchType" class="screen-i search-type">
            <el-option v-for="(item,index) in searchTypeList" :label="item.label" :value="item.value" :key="index"/>
          </el-select>
          <input
            type="text"
            placeholder="请输入姓名/身份证/被派遣单位名称"
            class="input search-input"
            v-model="searchText"
            @keydown.enter="search"
          />
          <button class="btn" @click="search">搜索</button>
          <button class="btn-white" @click="onReset">重置</button>
        </div>
        <div class="flex.align">
<!--          <button class="derivation derivation-right" @click="getDerivationRoster()">-->
<!--            导出名单-->
<!--          </button>-->
          <export-button @export="getDerivationRoster()">导出名单</export-button>
          <button class="derivation" @click="keyInsteadFactory">
            一键换厂
          </button>
        </div>
      </div>
    </div>
    <div class="container block block-alone">
      <el-tabs model-value="detail">
        <div class="header height-right">
          <div class=""></div>
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%"
            ref="dataTable"
            :header-row-style="{ color: '#202536' }"
            :row-style="{ color: '#5E617D' }"
            @selection-change="handleSelectionChangeOne"
            :row-key="rowKeyInit"
            type="selection"
          >
            <el-table-column type="selection" width="55" reserve-selection :selectable="checkMaterialStatus"/>
            <el-table-column type="index" label="序号" width="100px" reserve-selection/>
            <el-table-column :prop="policyStatus" label="状态" width="100px" class="dot" reserve-selection is-dot>
              <template #default="scoped">
                        <span v-if="scoped.row.policyStatus=='0'" class="rovalsState">
                            <em class="sub"/>待生效
                        </span>
                <span v-if="scoped.row.policyStatus=='1'" class="rovalsState">
                            <em class="adopt"/>保障中
                        </span>
                <span v-if="scoped.row.policyStatus=='2'" class="rovalsState">
                            <em class="stay"/>不在保
                        </span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" reserve-selection label="姓名" width="130px"/>
            <el-table-column class="card-no" reserve-selection prop="encryptionIdCardNo" label="身份证"/>
            <el-table-column label="方案类型" reserve-selection prop="companyPlanName" width="140px"/>
            <el-table-column
              width="320px"
              prop="serveCompanyName"
              label="被派遣单位"
            />
            <el-table-column prop="occupationName" label="所属工种" width="380px"/>
            <el-table-column label="操作">
              <template #default="scoped">
                <p
                  class="link"
                  v-if="scoped.row.idCardNo"
                  @click="getPeopleRecord(scoped.row.idCardNo)"
                >
                  投保记录
                </p>
                <p class="grey" v-else>暂无操作</p>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            v-model:currentPage="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="getPayrollList"
          >
          </el-pagination>
        </div>
      </el-tabs>
      <batchPayroll
        v-if="isBatchPay"
        @close="isBatchPay = false"
        @complete="getPayrollList"
        isType="payroll"
      />
    </div>
    <el-dialog v-model="isDeletePopup" width="1400px" left="50%" top="5%">
      <div class="record">投保记录</div>
      <div class="record-top">
        <!-- v-if="personnelInfo[0].policyStatus=='0'" -->
        <div class="top-name record-top-i">{{ personnelInfo[0].userName }}</div>
        <div class="rovalsState record-top-i">
          <!-- {personnelInfo[0].policyStatus == 1 ? '#00D679' : personnelInfo[0].policyStatus == 0 ? '#FF7E68' : ''} -->
          <div class="decorate"
               :style="{background:personnelInfo[0].policyStatus == 1 ? '#00a854' : personnelInfo[0].policyStatus == 2 ? '#FF7E68' : '#1989FA'}"></div>
          {{ personnelInfo[0].policyStatus == 1 ? '保障中' : personnelInfo[0].policyStatus == 2 ? '不在保' : '待生效' }}
        </div>
        <div class="top-idcord record-top-i">{{ personnelInfo[0].encryptionIdCardNo }}</div>
      </div>
      <el-table
        :header-cell-style="{background:'#F7F8FC'}"
        :data="tableData2"
        style="width: 100%"
        :header-row-style="{ color: '#202536' }"
        :row-style="{ color: '#5E617D' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="100px"/>
        <el-table-column
          width="320px"
          prop="serveCompanyName"
          label="被派遣单位"
        />
        <el-table-column prop="occupationName" label="工种"/>
        <el-table-column label="方案" prop="companyPlanName"/>
        <el-table-column prop="insurStartTime" label="开始时间"/>
        <el-table-column class="card-no" prop="insurEndTime" label="结束时间">
          <template #default="scoped">
            {{ scoped.row.insurEndTime || '暂无结束时间' }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" prop="createTime"/>
      </el-table>
    </el-dialog>
  </div>
  <!--  @close="this.isFactory = false"-->
  <changeFactory v-if="isFactory" :isFactory="isFactory" @close2="close2"
                 :renewalManufactory="renewalManufactory"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDetailDto, BillDto } from '@/api/bill'
// import { PeopleListDto } from '@/api/long-insure'
import {
    payrollRecordOwn,
    payrollRecordOwnAll,
    PayrollRecordDto
} from '@/api/pay'
import { getPayrollList, payrollDelete } from '@/api/payroll'
import {
    getPeopleList,
    getPeopleRecord,
    getDerivationRoster,
    oneKeyInsteadFactory,
    disposableTransposingArr
} from '@/api/long-insure'
import { exportPayroll } from '@/api/export'
import batchPayroll from '@/components/batch-payroll.vue'
import changeFactory from '@/components/chang-factory.vue'

export default defineComponent({
    name: 'LongInsureWorker',
    components: {
        batchPayroll,
        changeFactory
    },
    data () {
        return {
            searchType: '' as any,
            searchTypeList: [{
                value: '3',
                label: '全部'
            }, {
                value: '0',
                label: '待生效'
            }, {
                value: '1',
                label: '保障中'
            }, {
                value: '2',
                label: '不在保'
            }],
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            isDeletePopup: false,
            pageNum2: 1,
            pageSize2: 10,
            tableData2: [] as BillDetailDto[],
            idCardNo: '',
            idCardNo2: '',
            personnelInfo: [] as BillDetailDto[],
            renewalManufactory: [] as disposableTransposingArr[],
            conmpanyPlanId: 0,
            isFactory: false
        }
    },
    created () {
        console.log(this.$route.params.type, 'params')
        if (this.$route.params.type) {
            this.searchType = this.$route.params.type
        }
        this.getPayrollList()
        console.log(this.searchType, 'this.searchType')

    // eslint-disable-next-line no-undef
    },
    mounted () {
    // 获取完数据调用
        this.$nextTick(() => {
            // this.$refs.dataTable.toggleAllSelection()
        })
        this.$Bus.on('close2', (e) => {
            console.log(e, 'eeee')
            if (e) {
                this.isFactory = false
            }
        })
    },
    watch: {
        renewalManufactory (newVal, oldVal) {
            console.log(newVal, '1111111111111111111111111111', oldVal, '2222222222222222222222222222222222')
        }
    },
    methods: {
        async getPayrollList () {
            console.log(this.searchType == null ? '' : this.searchType)
            const result = await getPeopleList({
                searchText: this.searchValue,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                policyStatus: this.searchType === '3' ? '' : this.searchType
            }).then(res => {
                res.list.map((item: any) => {
                    item.encryptionIdCardNo = item.idCardNo.replace(/(.{3})(?:\d+)(.{4})$/, '$1*********$2')
                })
                console.log(res.list.idCardNo)
                this.idCardNo = res.list.idCardNo
                this.total = res.total
                this.tableData = res.list
            })
        },

        async getPeopleRecord (idCardNo: string) {
            this.isDeletePopup = true
            this.personnelInfo = this.tableData.filter((item: BillDetailDto) => item.idCardNo === idCardNo)
            console.log(this.personnelInfo[0], 'personnelInfo')
            const result = await getPeopleRecord({
                pageNum: this.pageNum2,
                pageSize: this.pageSize2,
                idCardNo: idCardNo
            })
            this.tableData2 = result.list
        },

        async getDerivationRoster () {
            const result = await getDerivationRoster({
                searchText: this.searchText,
                policyStatus: this.searchType === '3' ? '' : this.searchType
            })
            window.location.href =
        process.env.VUE_APP_BASE_URL +
        '/common/download?delete=true&fileName=' +
        result
            console.log(result, 'getDerivationRostergetDerivationRoster')
        },
        keyInsteadFactory () {
            this.isFactory = true
        },
        changeClose (e: boolean) {
            console.log(e, 'eeeeeee')
            this.isFactory = e
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getPayrollList()
        },
        rowKeyInit (row: any) {
            return row.id
        },
        // 减保复选框
        checkMaterialStatus (row: any, column: any, cellValue: any, index: any) {
            // this.addList.filter(item => item.errMsg)
            if (row.insurEndTime || row.policyStatus === 0) {
                // eslint-disable-next-line no-unused-expressions
                return false
            } else {
                return true
            }
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        handleSelectionChangeOne (selects: any[]) {
            console.log(selects, 'selectsselectsselects')
            this.selects = selects.map(item => item.id)
            console.log(this.selects, 'this.selectsthis.selectsthis.selects')
            // this.conmpanyPlanId =
            this.renewalManufactory = selects.map(item => {
                return {
                    id: item.id, // 要换厂的人员列表id
                    idCardNo: item.idCardNo, // 人员身份证
                    occupationId: item.occupationId, // 工种id（客户要换厂的工种id）
                    occupationName: item.occupationName, // 工种名（客户要换厂的工种名）
                    serveCompanyId: item.serveCompanyId, // 被派遣单位id（要换厂的id）
                    serveCompanyName: item.serveCompanyName, // 被派遣单位名称（要换厂的名称）
                    userName: item.userName, // 用户名
                    companyPlanId: item.companyPlanId
                }
            })
            console.log(this.renewalManufactory, 'renewalManufactory')
        },
        selectAll (e: any) {
            console.log(e, 'eeeeeeee是啥')
        },
        /**
     * 删除勾选工资单
     */
        async onDelete () {
            const str = this.selects.join(',')
            if (str.length === 0) {
                this.$message.warning('请至少选择一个！')
                return
            }
            await payrollDelete(str)
            this.getPayrollList()
            this.$message.success('删除成功！')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block {
  padding 20px
}

.basic
  margin-top 20px

.row
  display: flex
  justify-content: space-between
  align-items: center

.value
  margin-right 30px

.card-no
  font-size: 35 rpx

.rovalsState em {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
}

.rovalsState em.sub {
  background: #1989FA;
}

.rovalsState em.adopt {
  background: #00a854;
}

.rovalsState em.stay {
  background: #FF7E68;
}

.wait-sub
  position: absolute;
  top: 13%;
  left: 43%;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background: #1989fa;
  align-items: center;

.record
  font-weight: bold
  font-size: 20px
  text-align: center
  color #000000

.record-row
  text-align: center
  margin-top: 50px
  margin-bottom: 20px

.top
  font-weight: bold
  font-size: 15px

.idcord
  padding-left: 15px

.record-row span {
  padding-left: 20px
}

.status
  display: flex
  justify-content: space-between
  align-items: center

.value.important
  color color-red
  font-style italic

:deep().el-tabs__header.is-top
  display inline-block
  margin-top -20px

:deep().el-tabs__nav-scroll
  padding-right 20px

.height-right
  float: right

.download-btn
  width: 126px !important;

.btn-red
  background: #FF7E68

.el-tabs__header
  margin: 0

.block-alone
  padding: 0 24px 0

.screen-i
  width 50px
  margin-right 16px
  padding-left: 10px
  padding-right: 15px

.search-type
  width 100px
  margin-right 8px

.record-top
  display flex
  align-items center
  justify-content center
  margin 20px 0

  .record-top-i
    margin-left 12px

  .decorate
    width 6px
    height 6px
    border-radius 50%
    margin-right 5px

  // background red

  .rovalsState
    color #5E617D
    display flex
    align-items center

  .top-name
    color #202536
    font-size 16px
    font-weight 600

  .top-idcord
    color #5E617D

.derivation
  height: 40px;
  background: #1989fa;
  border-radius: 4px;
  border: none;
  color: #fff;
  cursor: pointer;
  width: 100px;

.derivation-right {
  margin-right 16px;
  background: #FFFFFF;
  color: color-black;
  border: 1px solid border-color;
}
</style>
